const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

// const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  mode: process.env.NODE_ENV,
  entry: process.env.debug
    ? {
      app: './app.tsx',
    }
    : {
      index: './src/index.tsx',
    },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    library: 'MyLibrary',
    libraryTarget: 'umd',
    publicPath: './',
  },
  devtool: 'source-map',
  externals: !process.env.debug
    ? ['react', 'react-dom']
    : {
      React: 'react',
      ReactDOM: 'react-dom',
    },
  plugins: [
    // new CleanWebpackPlugin(),
    // new HtmlWebpackPlugin({
    //   template: path.resolve(__dirname, './public/index.ejs'),
    // }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader'],
      },
      {
        test: /\.less$/i,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
              // modules: {
              //   mode: 'local',
              //   auto: true,
              //   exportGlobals: true,
              //   localIdentName: isDev ? '[path][name]__[local]--[hash:base64:5]' : '[local]--[hash:base64:5]',
              //   localIdentContext: paths.src,
              //   namedExport: false,
              //   exportLocalsConvention: 'camelCase',
              // },
              importLoaders: 2,
            },
          },
          {
            loader: require.resolve('postcss-loader'),
            options: {
              postcssOptions: {
                ident: 'postcss',
                config: false,
                plugins: [
                  'postcss-flexbugs-fixes',
                  [
                    'postcss-preset-env',
                    {
                      autoprefixer: {
                        flexbox: 'no-2009',
                      },
                      stage: 3,
                    },
                  ],
                  'postcss-normalize',
                ],
              },
              sourceMap: true,
            },
          },
          {
            loader: 'less-loader', // 将 Less 编译为 CSS
            options: {
              sourceMap: true,
              lessOptions: {
                javascriptEnabled: true,
                // modifyVars: themeVariables,
              },
            },
          },
        ],
      },
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                // ["@babel/preset-env", { useBuiltIns: "usage" }],
                '@babel/preset-env',
                '@babel/preset-react',
              ],
              plugins: [
                [
                  'import',
                  {
                    libraryName: 'antd',
                    // libraryDirectory: "es",
                    style: false, // `style: true` 会加载 less 文件
                  },
                ],
                '@babel/plugin-transform-runtime',
              ],
            },
          },
          { loader: 'ts-loader' },
        ],
      },
      {
        test: /\.(png|jpe?g|gif|webp|eot|ttf|woff|woff2|mp4)$/i,
        type: 'asset',
        parser: {
          // Conditions for converting to base64
          dataUrlCondition: {
            maxSize: 25 * 1024, // 25kb
          },
        },
        generator: {
          filename: 'images/[contenthash][ext][query]',
        },
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: 'babel-loader',
          },
          {
            loader: '@svgr/webpack',
            options: {
              babel: false,
              icon: true,
            },
          },
        ],
      },
    ],
  },
  devServer: {
    port: 80,
    publicPath: '/',
    contentBase: 'public',
    disableHostCheck: true,
    historyApiFallback: true,
    proxy: {
      '/api': {
        target: 'https://接口代理地址',
        pathRewrite: { '^/api': '/' },
        changeOrigin: true, // target是域名的话，需要这个参数，
        secure: false, // 设置支持https协议的代理
      },
    },
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js', '.jsx'],
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
};
